<!--
 * @Author: YSM
 * @Description: 
 * @Date: 2023-08-09 10:56:18
 * @LastEditTime: 2023-08-09 10:56:37
 * @FilePath: \my_web_knowledge\my_vue3_demo\src\views\cyberpunkButton\CyberpunkButton.vue
-->
<template>
  <button class="cyberpunk-button">
    <slot></slot>
  </button>
</template>

<style scoped>
.cyberpunk-button {
  background-color: #0f111b;
  color: #49edff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
}

.cyberpunk-button:hover {
  background-color: #49edff;
  color: #0f111b;
}
</style>
